<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 实例</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="book in books">{{ book.name}}</li>
        </ul>

        <hr>

        <ul>
            <li v-for="(book, index) in books">
                {{index}} -- {{book.name}}
            </li>
        </ul>

        <hr>

        <!-- 对象属性遍历 -->
        <ul>
            <li v-for="(value, key, index) in user">
                {{index}} -- {{key}}: {{value}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            books: [{
                    name: "Vue.js"
                },
                {
                    name: "JavaScript"
                },
                {
                    name: "Java"
                }
            ],
            user:{
                name:"什码情况",
                gender:'男',
                age:26
            }
        }
    })
</script>

</html>